<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--codemirror-->
    <link rel="stylesheet" href="/plugs/codemirror5-master/lib/codemirror.css">
    <script type="text/javascript" src="/plugs/codemirror5-master/lib/codemirror.min.js"></script>

    <!-- 代码格式化 -->
    <script type="text/javascript" src="/plugs/codemirror5-master/lib/formatting.js"></script>
    <!-- 主题-->
    <link rel="stylesheet" href="/plugs/codemirror5-master/theme/blackboard.css">
    <link rel="stylesheet" href="/plugs/codemirror5-master/theme/cobalt.css">

    <!--Java代码高亮-->
    <script type="text/javascript" src="/plugs/codemirror5-master/mode/cmake/cmake.js"></script>

    <!--提示框美化-->
    <link rel="stylesheet" href="/plugs/codemirror5-master/addon/dialog/dialog.css">
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/dialog/dialog.js"></script>

    <!--括号匹配-->
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/edit/matchbrackets.js"></script>

    <!--动态加载 mode -->
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/mode/loadmode.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/mode/meta.js"></script>

    <!--全屏模式-->
    <link rel="stylesheet" href="/plugs/codemirror5-master/addon/display/fullscreen.css">
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/display/fullscreen.js"></script>

    <!--自动补全-->
    <link rel="stylesheet" href="/plugs/codemirror5-master/addon/hint/show-hint.css">
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/hint/show-hint.js"></script>
    <!--SQl补全-->
    <script type="text/javascript" src="/plugs/codemirror5-master/mode/sql/sql.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/hint/sql-hint.js"></script>
    <!--XML补全-->
    <script type="text/javascript" src="/plugs/codemirror5-master/mode/xml/xml.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/hint/xml-hint.js"></script>
<!--    <script type="text/javascript" src="/plugs/sql-formatter-master/sql-formatter.min.js"></script>-->


    <!--支持代码折叠-->
    <link rel="stylesheet" href="/plugs/codemirror5-master/addon/fold/foldgutter.css"/>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/foldcode.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/foldgutter.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/brace-fold.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/xml-fold.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/indent-fold.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/markdown-fold.js"></script>
    <script type="text/javascript" src="/plugs/codemirror5-master/addon/fold/comment-fold.js"></script>

    <!-- 树形表格-->
    <link rel="stylesheet" href="/plugs/bootstrap-treetable/bootstrap-treetable.css">
    <script type="text/javascript" src="/plugs/bootstrap-treetable/bootstrap-treetable.js"></script>

    <!-- 拖拽、改变元素大小-->
<!--    <script type="text/javascript" src="/plugs/jquery-ui-1.13.2/jquery-ui.js"></script>-->

    <link rel="stylesheet" href="/pages/dms/dms.css">
    <link rel="stylesheet" href="/pages/dms/dms.api.css">
    <link rel="stylesheet" href="/pages/dms/dms.execute.css">

    <style type="text/css">
        .dms .CodeMirror .CodeMirror-foldgutter{
            /* 原生宽度单位em，使得pre margin-left 计算有误*/
            width: 13px !important;
        }
        .dms .CodeMirror .CodeMirror-scroll{
            overflow: auto !important;
            margin-right: unset;
        }
        .dms .form-control-plaintext{
            outline: unset !important;
        }
</style>
</head>
<script type="text/javascript">
    $(function () {

        $(".dms-center").mouseover(function(e) {
            $(this).css("cursor", "e-resize");
        });
        $(".dms-center").mousedown(function(e) {
            $(this).css("cursor", "e-resize");
            var width = $(".dms").width();
            $("body").mousemove(function(eve) {
                var _x = eve.pageX;
                $(".dms-left").css({
                    width: _x - width * 0.03
                });
                $(".dms-right").css({
                    width: width - _x + 40
                });
            })
        });
        $("body").mouseup(function(e) {
            $(this).unbind("mousemove");
            $(this).css("cursor", "default");
        });
    })
</script>

<!--CodeMirror api详细文档-->
<!--https://blog.csdn.net/xiaohxx/article/details/89761737-->
<body>
<div class="dms">
    <div class="dms-left">
        <form role="form" id="codeMirror">
            <div class="form-group" style="margin-bottom: unset;">
                <div class="codeMirror-operator">
                    <button type="button" id="generate" class="btn btn-link">生成</button>
                    <button type="button" id="validator" class="btn btn-link">解析/校验</button>
                    <!--<button type="button" id="merge" class="btn btn-link">合并</button>-->
                    <button type="button" id="execute" class="btn btn-link">执行</button>
                    <button type="button" id="submit" class="btn btn-link">提交</button>
                    <button type="button" id="formatter" class="btn btn-link">格式化</button>
                    <span class="iconfont icon-icon-question" data-content="Ctrl+Alt 显示鼠标所在位置的提示"></span>
                    <!--<button type="button" id="fullscreen" class="btn btn-link">全屏</button>-->
                    <span  id="alert" class="alert"></span>
                </div>
                <div class="codeMirror-alert-info">
                    <span class="close"></span>
                    <span class="alert-info-message"></span>
                </div>
                <textarea class="form-control" id="mappedStatement" rows="3" placeholder="动态SQL"></textarea>
            </div>
        </form>
    </div>
    <div class="dms-center"></div>
    <div class="dms-right">
                <nav>
                    <div class="nav nav-tabs" id="dms-nav-tab" role="tablist">
                        <button class="nav-link active" id="dms-config-tab" data-toggle="tab" data-target="#dms-config" type="button" role="tab" aria-controls="nav-home" aria-selected="true">配置</button>
                        <!--<button class="nav-link" id="dms-method-tab" data-toggle="tab" data-target="#dms-method" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">方法</button>-->
                        <button class="nav-link" id="dms-api-tab" data-toggle="tab" data-target="#dms-api" type="button" role="tab" aria-controls="nav-home" aria-selected="true">接口</button>
                        <button class="nav-link" id="dms-execute-tab" data-toggle="tab" data-target="#dms-execute" type="button" role="tab" aria-controls="nav-home" aria-selected="true">执行</button>
                    </div>
                </nav>

                <div class="tab-content">
                    <div class="tab-pane fade show active" id="dms-config" role="tabpanel" aria-labelledby="dmsConfig-tab">
                        <form>
                            <div class="form-group row">
                                <label for="namespace" class="col-sm-3 col-form-label required">空间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="namespace">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="dataSourceCodes" class="col-sm-3 col-form-label required">数据库</label>
                                <div class="col-sm-9">
                                    <select id="dataSourceCodes" class="form-control">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>

                            <div class="single-table-pattern">
                                <div class="form-group row">
                                    <label for="tables" class="col-sm-3 col-form-label required">表</label>
                                    <div class="col-sm-9">
                                        <select id="tables" multiple="multiple" class="form-control"></select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="methods" class="col-sm-3 col-form-label required">方法</label>
                                    <div class="col-sm-9">
                                        <select id="methods" multiple="multiple" class="form-control">
                                            <option value="save">save</option>
                                            <option value="selectPage">selectPage</option>
                                            <option value="selectById">selectById</option>
                                            <option value="selectList">selectList</option>
                                            <option value="deleteById">deleteById</option>
                                            <option value="insert">insert</option>
                                            <option value="updateById">updateById</option>
                                            <option value="update">update</option>
                                            <option value="saveBatch">saveBatch</option>
                                            <option value="insertBatch">insertBatch</option>
                                            <option value="updateBatch">updateBatch</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade dms-api-tab-pane" id="dms-api" role="tabpanel" aria-labelledby="dmsItem-tab">
                        <div class="form-group api-box"></div>
                    </div>

                    <div class="tab-pane fade dms-execute-tab-pane" id="dms-execute" role="tabpanel" aria-labelledby="dmsItem-tab">
                        <div class="form-group execute-container"></div>
                    </div>
                </div>
    </div>
</div>
</div>

<script type="text/javascript" src="/plugs/aip-doc/api.mock.js"></script>
<script type="text/javascript" src="/pages/dms/dmsCodeMirror.js"></script>
<script type="text/javascript" src="/pages/dms/dms-config.js"></script>
<script type="text/javascript" src="/pages/dms/dms-api.js"></script>
<script type="text/javascript" src="/pages/dms/dms-execute.js"></script>


</body>
</html>